import Wrapper from "./style";
import logo from "@/static/imgs/Login/logo_blue.png";
import newbg from "@/static/imgs/Login/newbg.png";
import {useState} from "react";
import classNames from "classnames";
import SMSLogin from "@/pages/Login/components/SMSLogin";
import AccountLogin from "@/pages/Login/components/AccountLogin";
import QRLogin from "@/pages/Login/components/QRLogin";

const Login = () => {
    // 处理tab切换
    const [activeIndex, setActiveIndex] = useState(0);
    const switchForm = (index: number) => {
        switch (index) {
            case 0:
                return <AccountLogin/>
            case 1:
                return <SMSLogin/>
            case 2:
                return <QRLogin/>
            default:
                return <AccountLogin/>
        }
    }

    return (
        <Wrapper>
            <div className="login">
                <div className="logo">
                    <img src={logo} alt=""/>
                </div>
                <div className="content">
                    <div className="left">
                        <img src={newbg} alt=""/>
                    </div>
                    <div className="right">
                        <div className="right-content">
                            <div className="title">
                                <span>账号登录</span>
                            </div>
                            <ul className="nav-tabs">
                                <li className={classNames('item', activeIndex === 0 && 'active')} onClick={() => {
                                    setActiveIndex(0)
                                }}>
                                    <span>账号登录</span>
                                </li>
                                <li className={classNames('item', activeIndex === 1 && 'active')} onClick={() => {
                                    setActiveIndex(1)
                                }}>
                                    <span>手机短信登录</span>
                                </li>
                                <li className={classNames('item', activeIndex === 2 && 'active')} onClick={() => {
                                    setActiveIndex(2)
                                }}>
                                    <span>密码设置</span>
                                </li>
                            </ul>
                            <div className="tab">
                                {switchForm(activeIndex)}
                            </div>
                            <div className="qr-box">
                                <div
                                    onClick={() => {
                                        if (activeIndex === 2) {
                                            setActiveIndex(0)
                                        } else {
                                            setActiveIndex(2)
                                        }
                                    }}
                                    style={activeIndex === 2 ? {
                                        backgroundPosition: '0 -141px',
                                    } : {}} className="qr-code"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Wrapper>
    );
}
export default Login;